<template>
    <div class="information">
        <Search @searchData="getInformationData" @resetData="getInformationData"></Search>
        <AddAndDel @delsByIds="delsByIds"></AddAndDel>
        <el-card>
            <el-table ref="multipleTable" class="custom-table" height="450px"
                :default-sort="{ prop: 'date', order: 'descending' }"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" :data="tableData" tooltip-effect="dark"
                style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="id" label="序号" width="100" sortable>
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column prop="title" label="资讯标题" width="400" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="content" label="资讯内容">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="handleDetail(scope.row.content)">点击查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="createdDt" label="发布时间">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleEdit(scope.row)" plain>编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)" plain>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :paginationData="paginationData" @getPaginationData="getInformationData"></Pagination>
        </el-card>
        <!-- 新增 编辑 弹窗 -->
        <PoorDialog @addInformation="addInformation" @getInformationData="getInformationData"></PoorDialog>
        <!-- 查看详情 -->
        <PoorDetailDialog :content="content"></PoorDetailDialog>
    </div>
</template>
<script>
import Search from '../../components/search/index.vue'
import AddAndDel from '../../components/add_and_del/index.vue'
import Pagination from '../../components/pagination/index.vue'
import PoorDialog from './dialog/index.vue'
import PoorDetailDialog from '../../components/detail_dialog/index.vue'
export default {
    name: 'Information',
    components: {
        Search,
        AddAndDel,
        Pagination,
        PoorDialog,
        PoorDetailDialog
    },
    mixins: [],
    props: {

    },
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            paginationData: {},
            content: ''
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        this.getInformationData()
    },
    methods: {
        // 获取扶贫资讯信息
        getInformationData(obj = { currentPage: 1, pageSize: 10, keyword: '', type: 0 }) {
            this.request.post('/helpPoorInfo/selectHelpPoorInfoPage', obj).then(res => {
                if (res.code == 20000) {
                    res.data.list.forEach(item => {
                        if (item.createdDt) {
                            item.createdDt = item.createdDt.slice(0, 10)
                        }
                    })
                    this.tableData = res.data.list
                    this.paginationData = res.data

                }
            })
        },
        // 新增 修改 扶贫信息
        addInformation(obj) {
            this.request.post('/helpPoorInfo/helpPoorInfoAdit', obj).then(res => {
                if (res.code == 20000) {
                    this.getInformationData()
                }
            })
        },
        //批量删除
        handleSelectionChange(selectedData) {
            // 被选中的数据的id
            this.multipleSelection = selectedData.map(item => item.id);
            this.$bus.$emit('multipleSelection', this.multipleSelection)

        },
        // 批量删除
        delsByIds() {
            this.$confirm('此操作将删除多条评论, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.request.post('/helpPoorInfo/helpPoorInfoDelByIds', { ids: this.multipleSelection, type: 0 }).then(res => {
                    if (res.code == 20000) {
                        this.getInformationData()
                        this.$message({
                            type: 'success',
                            message: '删除成功~'
                        })
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });

            });

        },
        // 编辑公告信息
        handleEdit(row) {
            this.$bus.$emit('add', true)
            this.$bus.$emit('getForm', row)
        },
        // 删除公告信息
        handleDelete(row) {
            this.$confirm('确定删除该公告?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.request.post('/helpPoorInfo/helpPoorInfoDel', { id: row.id, type: 0 }).then(res => {
                    if (res.code == 20000) {
                        this.getInformationData()
                        this.$message({
                            type: 'success',
                            message: '删除成功~'
                        })

                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        // 资讯详情
        handleDetail(content) {
            this.content = content
            this.$bus.$emit('showDetailDialog', true)
        }
    }
}; 
</script>
<style lang='less' scoped>
.information {
    .el-table {
        font-size: 12px;
    }

    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #11A983 !important;
        color: #FFF;
    }

}
</style>